<!-- 父组件如何加渲染子组 -->
<template>
  <div id="app">
    <!-- 引入组件的第一种写法 -->
    <!-- 第三步：使用组件 -->
    <!-- 如果注册的组建名中有大写字母，尽量改为 -小写字母，例如：
     childB,则在使用组件时，要用：<child-b></child-b>-->
    <!-- <child></child>
    <child-b></child-b> -->
    <!--引入组件的第二种写法-->
    <!-- 优点：
      1.https://cn.vuejs.org/v2/guide/components.html#DOM-%E6%A8%A1%E6%9D%BF%E8%A7%A3%E6%9E%90%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9
      2.可以动态切换组建 通过v-bind:is-->
    <!-- <p is="child"></p> -->
    <!-- <div :is="comToRender" @my-event="onChildEvent"></div>
    <button @click="changeFun">切换组建</button> -->
    <!-- 父组件如何向子组件传值 -->
    <!-- <child number="5" @my-event="onChildEvent"></child> -->
    <!-- 如果传递的参数存在大写字母： -->
    <!-- 动态 Prop -->
    <input type="text" v-model="fatherString">
    <child :number-to-do='fatherNum' :string='fatherString' @my-event="onChildEvent">
      <p slot='header'>xxxxx header</p>
      <p slot='footer'>xxxxx footer</p>
    </child>
    <!-- <child :number-to-do="5" :string='fatherString' @my-event="onChildEvent"></child> -->
    <!-- number-to-do不传，则子组件的使用默认值 -->
    <!-- <child @my-event="onChildEvent"></child> -->
    <!-- 子组件中定义number-to-do type: Number ，如果传入不是number类型的参数，则会报错-->
    <!-- <child :number-to-do="parameterNum" @my-event="onChildEvent"></child> -->
  </div>
</template>
<script>
// 第一步：通过import将子组件载入父组件的js中
import child from './components/child.vue'
import childB from './components/childB.vue'
export default {
  name: 'app',
  // 第二步：将子组件在父组件的componerts中注册
  // 如果想给引入的组建重新命名，那么：
  // components: {
  //   新名字:child
  // },
  components: {
    child,
    childB
  },
  data() {
    return {
      comToRender: 'child',
      fatherNum:100,
      fatherString:'hello children',
      parameterNum:'1'
    }
  },
  mounted: function() {
    this.$nextTick(function() {});
  },
  methods: {
    onChildEvent(parmFromChild) {
      console.log(parmFromChild);
    },
    changeFun(){
      this.comToRender="childB";
    }
  }
}

</script>
<style>
* {
  margin: 0;
  padding: 0;
}

body {
  width: 100%;
  height: 100%;
  position: absolute;
}

#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  width: 100%;
  height: 100%;
}

</style>
